<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit" />
  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
  <link rel="icon" type="image/png" href="/img/app-icon72x72.png" />
  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes" />
  <link rel="icon" sizes="192x192" href="/img/app-icon72x72@2x.png" />
  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-mobile-web-app-title" content="标题" />
  <link rel="apple-touch-icon-precomposed" href="/img/app-icon72x72@2x.png" />
  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="/img/app-icon72x72@2x.png" />
  <meta name="msapplication-TileColor" content="#0e90d2" />
  <meta name="viewport" content="width=1200, user-scalable=yes">
  <title>网络培训-详情</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <!-- /meta -->
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace.min.js"></script>
  <link
    href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace-theme-minimal.min.css"
    rel="stylesheet">
  <!--[if lte IE 9]>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  <!--[if gt IE 9]><!-->
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/jquery.3.3.1min.js"></script>
  <!--<![endif]-->
  <!-- /script -->
  <link rel="stylesheet" href="/css/main.min.css">

  <!-- /style -->
</head>

<body>
  <div class="page page-network-training">

    <section class="common_header_item">

      <header class="page__header">

      </header>

      <article class="section page__main_nav">
        <div class="section__wrapper" style="width: 1220px;">
          <div class="column-inner clearfix">
            <nav class="page__nav bar__inner j_follow_bar_nav">
              <li class="nav__item" data-nav="index"><span class="nav__title"><a href="index.html">首页</a></span>
              </li>
              <li class="nav__item" data-nav="news"><span class="nav__title"><a href="news.html">文化资讯</a></span>
              </li>
              <li class="nav__item" data-nav="live"><span class="nav__title"><a href="live.html">互动直播</a></span>
              </li>
              <li class="nav__item" data-nav="ancient"><span class="nav__title"><a
                    href="ancient-culture.html ">古都文化</a></span>
              </li>
              <li class="nav__item" data-nav="activity"><span class="nav__title"><a href="activity.html">活动预约</a></span>
              </li>
              <li class="nav__item" data-nav="venue"><span class="nav__title"><a href="venue.html">场馆预定</a></span>
              </li>
              <li class="nav__item" data-nav="network"><span class="nav__title"><a
                    href="network-train.html">网络培训</a></span>
              </li>
              <li class="nav__item" data-nav="travel"><span class="nav__title"><a
                    href="culture-travel.html">文化旅游</a></span>
              </li>
              <li class="nav__item" data-nav="heritage"><span class="nav__title"><a
                    href="culture-heritage.html ">文化非遗</a></span>
              </li>
              <!-- <li class="nav__item" data-nav="volunteer"><span class="nav__title"><a href="volunteer-event-archive.html">志愿服务</a></span></li> -->
              <!-- <li class="nav__item" data-nav="app"><span class="nav__title"><a href="#">社团管理</a></span></li> -->
              <li class="nav__item" data-nav="county"><span class="nav__title"><a
                    href="county-view.html">区县风采</a></span>
              </li>
              <span class="follow__bar"></span>
            </nav>
          </div>
        </div>
      </article>
    </section>
    <!-- /header -->
    <main class="page__container">
      <section class="section section__breadcrumb">
        <div class="section__wrapper">
          <div class="pure-u-1">
            <div class="column-inner">
              <div class="nav__breadcrumb">
                <a class="item" href="index.html">首页</a>
                <span class="separator">&gt;</span>
                <a class="item" href="network-train.html">网络培训</a>
                <span class="separator">&gt;</span>
                <a class="item active" href="javascript:void(0)">详情</a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="section">
        <div class="section__wrapper" id="network_info">
          <div class="module clearfix">
            <div class="column-inner">
              <div class="network-title">小新Power BI课堂 8小时掌握篇小新Power BI课堂 8小时掌握篇</div>
              <div class="live_info">
                <span><i class="iconfont">&#xe62e;</i>222</span>
                <span class="j_like" id="like"><i class="iconfont">&#xe7e1;</i><i class="number">1615</i> </span>
                <span class="j_collect" id="collect"><i class="iconfont">&#xe870;</i>收藏</span>
                <span><i class="iconfont">&#xe651;</i>分享</span>
              </div>
            </div>
            <div class="pure-u-2-3">
              <div class="network-chapter-item">
                <div class="network-list">
                  <div class="network-list-poster">
                    <a href="network-training-video.html">
                      <img src="http://via.placeholder.com/245x147" width="100%" height="147" alt="">
                    </a>
                  </div>
                  <div class="network-chapter-centent">
                    <div class="title">第一张</div>
                    <div class="studynunber">136人学过</div>
                    <div class="lecturer">讲师：小新老师</div>
                    <div class="synopsis">章节简介章节简介章节简介章节简介章节简介章节简介章节简介章节简介 章节简介章节简介章节简介</div>
                  </div>
                </div>
                <div class="network-list">
                  <div class="network-list-poster">
                    <a href="network-training-video.html">
                      <img src="http://via.placeholder.com/245x147" width="100%" height="147" alt="">
                    </a>
                  </div>
                  <div class="network-chapter-centent">
                    <div class="title">第一张</div>
                    <div class="studynunber">136人学过</div>
                    <div class="lecturer">讲师：小新老师</div>
                    <div class="synopsis">章节简介章节简介章节简介章节简介章节简介章节简介章节简介章节简介 章节简介章节简介章节简介</div>
                  </div>
                </div>

              </div>


            </div>
            <div class="pure-u-1-3">
              <div class="course-information-item">
                <div class="detail-ico">
                  课程信息
                </div>
                <div class="course-list">主讲人：XXXXXXX</div>
                <div class="course-list">课程时长：XXXXXXX</div>
                <div class="course-list">课程章节：XXXXXXX</div>
                <div class="course-list">主讲人：XXXXXXX</div>
                <div class="course-list">课程分类：XXXXXXX</div>
              </div>
            </div>
          </div>

        </div>
        <div class="column-list js_column_on">
          <span class="column_item active">课程介绍</span>
          <span class="column_item" id="commentCount">评论区(44)</span>
        </div>
        <div class="venue-content">
          <div class="section__wrapper">
            <div class="column-inner">
              <div class="deseditor clearfix" id="description">
                <!-- <p>
                  根据自治区党委、自治区人民政府的工作部署，今年3月，联席会议成员单位联合印发了《2019年“壮族三月三·八桂嘉年华”文化旅游消费品牌活动工作方案》，定于3月25日至4月25日，在全区各地集中开展“壮族三月三·八桂嘉年华”活动。4月4日上午，2019年“壮族三月三·八桂嘉年华”主会场活动将在广西民族博物馆隆重举行。
                </p>
                <br />
                <p style="text-align: center;">
                  <img src="http://via.placeholder.com/800x450" class="img-responsive" alt="" />
                </p>
                <br />
                <p>
                  根据自治区党委、自治区人民政府的工作部署，今年3月，联席会议成员单位联合印发了《2019年“壮族三月三·八桂嘉年华”文化旅游消费品牌活动工作方案》，定于3月25日至4月25日，在全区各地集中开展“壮族三月三·八桂嘉年华”活动。4月4日上午，2019年“壮族三月三·八桂嘉年华”主会场活动将在广西民族博物馆隆重举行。
                </p> -->
              </div>
            </div>
          </div>
        </div>
        <!-- /venue-content -->
        <div class="venue-content" style="display: none;">
          <div class="section__wrapper">
            <div class="column-inner">
              <div class="message-ask">
                <div class="module message-text">
                  <textarea class="ui-area" placeholder="我要提问" id="commentText"></textarea>
                </div>
                <div class="message-text tr">
                  <span class="sendBtn" id="subComment">发表评论</span>
                </div>
              </div>
              <div class="message-list_wrapper">
                <div id="comment">

                  <div class="message-box">
                    <div class="ask-list">
                      <img src="http://via.placeholder.com/68x68" class="avatar" alt="" width="56"
                        height="56" />用户名<span class="minute">23分钟前</span>
                    </div>
                    <div class="message-content">
                      节目很精彩，小朋友很喜欢，希望以后多多主办类似小朋友很喜欢，希望以后多多主办类似的活小朋友很喜欢，希望以后多多主办类似的活的活动 嘻嘻~~</div>
                  </div>

                  <div class="message-box">
                    <div class="ask-list">
                      <img src="http://via.placeholder.com/68x68" class="avatar" alt="" width="56"
                        height="56" />用户名<span class="minute">23分钟前</span>
                    </div>
                    <div class="message-content">
                      节目很精彩，小朋友很喜欢，希望以后多多主办类似小朋友很喜欢，希望以后多多主办类似的活小朋友很喜欢，希望以后多多主办类似的活的活动 嘻嘻~~</div>
                  </div>

                </div>


                <!-- <div class="message-box">
                  <div class="ask-list">
                    <img src="http://via.placeholder.com/68x68" class="avatar" alt="" width="56" height="56" />用户名<span
                      class="minute">23分钟前</span>
                  </div>
                  <div class="message-content">
                    节目很精彩，小朋友很喜欢，希望以后多多主办类似小朋友很喜欢，希望以后多多主办类似的活小朋友很喜欢，希望以后多多主办类似的活的活动
                    嘻嘻节目很精彩，小朋友很喜欢，希望以后多多主办类似小朋友很喜欢，希望以后多多主办类似的活小朋友很喜欢，希望以后多多主办类似的活的活动 嘻嘻~~</div>
                </div> -->


                <nav class="page-pagination" aria-label="page-pagination" id="pages">
                  <ul class="pagination">
                    <li class="item previous"><a href="#" aria-label="Previous" aria-hidden="true">首页</a>
                    </li>
                    <li class="item active"><a href="#">1</a>
                    </li>
                    <li class="item"><span>2</span>
                    </li>
                    <li class="item"><a href="#">3</a>
                    </li>
                    <li class="item"><a href="#">4</a>
                    </li>
                    <li class="item"><a href="#">5</a>
                    </li>
                    <li class="item"><a href="#">6</a>
                    </li>
                    <li class="item next"><a href="#" aria-label="Next" aria-hidden="true">下一页</a>
                    </li>
                    <li class="item">跳转到</li>
                    <li class="item">
                      <input type="text" />
                    </li>
                    <li class="item">页</li>
                    <li class="item active"><a href="#">&nbsp;&nbsp;GO&nbsp;&nbsp;</a>
                    </li>
                    <li class="item news-number">当前共有<i>1000</i>条</li>
                  </ul>
                </nav>

              </div>
            </div>
          </div>
        </div>
        <!-- /venue-content -->
      </section>
    </main>

    <footer class="page__footer">
    </footer>
  </div>
  <!-- /page -->

  <script
    src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/underscore-min-1.8.3/underscore-min.js"></script>
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/bowser.min.js"></script>
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.jquery.min.js"></script>
  <link
    href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.min.css"
    rel="stylesheet">
  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/layer-3.0.3/layer.min.js"></script>



  <!-- 前端交互脚本 -->
  <script src="js/common/xtab.js"></script>
  <script src="js/common/xbar.js"></script>
  <script src="js/common/util.js"></script>

  <script src="js/app.js"></script>
  <script src="/js/common.min.js"></script>

  <script src="js/common.js"></script>
  <script src="js/util/page-helper.js"></script>
  <script src="js/page-header.js"></script>
  <script src="js/page-footer.js"></script>
  <!-- /script -->
</body>
<script>
  $(document).ready(function () {
    var pubId = getQueryString("pubId");
    var params = {
      pubId: pubId,
      collectionId: null
    }

    commonAjax({
      'type': "get",
      'url': "api/res/detail"
    }, params, (req) => {
      req.setRequestHeader("userId", 1)
    }, data => {
      var item = data.data;
      params.collectionId = item.res.collectionId;
      var recommend = item.recommend;
      var html = '<div class="module clearfix">' +
        '<div class="column-inner">' +
        '<div class="network-title">' + item.keywords + '</div>' +
        '<div class="live_info">' +
        '<span><i class="iconfont ' + (item.isPraise > 0 ? 'live_ture' : '') + '" isPraise="' + item.isPraise + '" praiseNum="' + item.praiseNum + '"></i>' + item.accessNum + '</span>' +
        '<span class="j_like ' + (item.isPraise > 0 ? 'live_ture' : '') + '" id="like" ><i class="iconfont info-div-icon">' + (item.isPraise > 0 ? '&#xe7e2' : '') + '</i><i class="number info-div-num">' + item.praiseNum + '</i> </span>' +
        '<span class="j_collect' + (item.collectNum > 0 ? 'live_ture' : '') + '" collectNum="' + item.collectNum + '"  id="collect" ><i class="iconfont">' + (item.collectNum > 0 ? '&#xe86f;' : '') + '</i>收藏</span>' +
        '<span><i class="iconfont"></i>分享</span>' +
        '</div>' +
        '</div>' +
        '<div class="pure-u-2-3">' +
        '<div class="network-chapter-item">';

      commonAjax({
        'type': "post",
        'url': "api/res/list"
      }, params, null, res => {
        var list = res.data;
        if (list.length > 0) {
          $(list).each((i, rec) => {
            html += '<div class="network-list">' +
              '<div class="network-list-poster">' +
              '<a href="network-training-video.html?pubId=' + rec.pubId + '">' +
              '<img src="' + rec.poster + '" width="100%" height="147" alt="">' +
              ' </a>' +
              ' </div>' +
              '<div class="network-chapter-centent">' +
              '<div class="title">' + rec.title + '</div>' +
              '<div class="studynunber">' + rec.accessNum + '人学过</div>' +
              '<div class="lecturer">讲师：' + rec.res.author + '</div>' +
              '<div class="synopsis">' + rec.description + '</div>' +
              '</div>' +
              ' </div>';
          })
        }

        html += '</div></div>' +
          '<div class="pure-u-1-3">' +
          '<div class="course-information-item">' +
          '<div class="detail-ico">' +
          '课程信息' +
          '</div>' +
          '<div class="course-list">主讲人：' + item.res.author + '</div>' +
          '<div class="course-list">课程时长：' + item.res.duration + '分钟</div>' +
          '<div class="course-list">课程章节：' + item.res.series + '</div>' +
          '<div class="course-list">课程分类：' + item.keywords + '</div>' +
          '</div></div></div>';
        $("#network_info").html(html)
        $("#description").html(item.res.description);

        // 点赞
        $(".j_like").on("click", function () {
          var $this = $(this);
          $this.removeClass("parised").addClass("live_ture");
          initPraiseRes(params.pubId, "#like", $this.attr("isPraise"), $this.attr("praiseNum"))

          // var iconfont = "&#xe7e1;";
          // var _thisNumber = $(this).find(".number").html() * 1;
          // $(this).toggleClass("live_ture");
          // if ($(this).hasClass("live_ture")) {
          //   iconfont = "&#xe7e2;";
          //   _thisNumber++
          // } else {
          //   _thisNumber--
          // }
          // $(this).html('<i class="iconfont">' + iconfont + '</i> <i class="number">' + _thisNumber + '</i>');
        })

        // 收藏
        $("#collect").on("click", function () {
          deleteFav(pubId)
          var $this = $(this);
          var iconfont = "&#xe86f;";
          var collect = "收藏";
          $(this).toggleClass("live_ture");
          if ($(this).hasClass("live_ture")) {
            collect = "已收藏"
          } else {
            iconfont = "&#xe870;";
          }
          $(this).html('<i class="iconfont">' + iconfont + '</i>' + collect);
          var collectNum = $this.attr("collectNum");
          var ban = (collectNum + 1) % 1;
          $this.attr("collectNum", ban)
        })
      })
      //detail
    })

    var parms = {
      //你的参数
      'pubId': params.pubId,
      'state': 2,
      'pageSize': 8,//每页条数
      'pageNumber': 1,//页码
    }
    var pageParms = {//根据这个来显示
      'currPage': 1,//当前页码
      'total': 30,//总条数
      'totalPage': 6,//总页码
      'pageSize': 5//每页条数
    }

    //加载评论
    loadComment();
    function loadComment() {
      initCommentList("#comment", parms, (data) => {
        var list = data.data;
        pageParms.currPage = data.currPage;
        pageParms.pageSize = data.pageSize;
        pageParms.totalPage = data.totalPage;
        pageParms.total = data.total;
        page(pageParms, "pages")
        var commentHtml = '';
        $("#commentCount").text("评论区(" + list.length + ")")
        $(list).each((index, item) => {
          commentHtml += '<div class="message-box">' +
            '<div class="ask-list">' +
            '<img src="http://via.placeholder.com/68x68" class="avatar" alt="" width="56" height="56" />' + item.userName +
            '<span class="minute">' + item.createTime + '</span>' +
            '</div>' +
            '<div class="message-content">' + item.comment + '</div>' +
            '</div>';
        })
        return commentHtml;
      })
    }

    //发评论
    initSendCommentRes(params.pubId, "#subComment", "#commentText")

    //监听分页
    $('#pages').on('click', 'a', function (e) {
      var $this = $(this);
      pageNumber = $this.attr("pageNumber");
      var number = /^[0-9]*$/;
      var newPageNumber;
      if (pageNumber === "page") {
        //更新请求参数
        newPageNumber = number.test($("#page").val()) ? $("#page").val() : pageParms.currPage;
      } else {
        newPageNumber = pageNumber;
      }

      if (newPageNumber != pageParms.currPage) {
        parms.pageNumber = newPageNumber;
        loadComment()
      }
      if ($this.attr('href') === "#") {
        e.preventDefault();
      }
    });


    //获取地址栏的键值对
    function getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return decodeURI(r[2]);
      return null;
    }

    $(".js_column_on").on('click', '.column_item', function () {
      var indexV = $(this).index();
      $(this).addClass("active").siblings().removeClass("active");
      var listObj = $(".venue-content").eq(indexV);
      listObj.show();
      listObj.siblings(".venue-content").hide();
    });

    function deleteFav(pubId) {
      commonAjax({
        type: 'POST',
        url: 'api/res/collect'
      }, {
          'pubId': pubId
        }, (req) => {
          req.setRequestHeader("userId", 1)
        }, (data) => {
          // window.location.reload()
        })
    }
  });
</script>

</html>